<template>
	<div id="app" v-show="show">
		<button @click="change(-1)">-</button>
		<span>{{n}}</span>
		<button @click="change(+1)">+</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				n: 0,
				show: true,
			}
		},
		created() {
			setInterval(() => {
				if (this.n > 10) {
					this.show = false;
				} else {
					this.n++
				}
			}, 500)
		},
		methods: {
			change(i) {
				//如果i==+1,说明本次想+1
				if (i === 1) {
					this.n++;
				} else {
					//否则如果i!=+1，说明本次想-1
					//只有n>0时，才能-1
					if (this.n > 0) {
						this.n--;
					}
				}
			},
		},
	}
</script>

<style>
</style>